<template>
  <div class="home">
    <van-nav-bar>
      <template #left>
        <van-image
          width="16"
          height="16"
          src="https://huangshen.oss-cn-beijing.aliyuncs.com/yao-shop/favicon.ico"
        />
        <h4 class="local">南阳</h4>
        <van-icon name="arrow-down" />
      </template>
    </van-nav-bar>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <van-image
          src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/images/lun1.png"
        />
      </van-swipe-item>
      <van-swipe-item>
        <van-image
          src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/images/lun2.png"
        />
      </van-swipe-item>
      <van-swipe-item>
        <van-image
          src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/images/lun3.png"
        />
      </van-swipe-item>
      <van-swipe-item>
        <van-image
          src="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/images/lun4.png"
        />
      </van-swipe-item>
    </van-swipe>
    <van-pull-refresh
      v-model="state.loading"
      @refresh="onRefresh"
      style="padding: 5px; margin-bottom: 50px; min-height: 90vh"
    >
      <h2 style="text-align: center">我的患者</h2>
      <div class="my-list">
        <div
          class="my-list-item"
          v-for="(patient, index) in patients"
          :key="patient.id"
        >
          <van-button round type="primary" size="mini" to="/case"
            >问诊记录</van-button
          >
          <van-image
            round
            height="50px"
            width="50px"
            src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg"
          ></van-image>
          <div class="info">
            <div class="header">
              <span class="name">{{ patient.name }}</span>
              <span class="sex">{{ patient.sex }}</span>
              <span class="age">{{ patient.age + "岁" }}</span>
            </div>
            <van-tag type="success" v-if="patient.isAccept == 1"
              >接诊中</van-tag
            >
            <van-tag type="primary" v-if="patient.isAccept == 0"
              >待接诊</van-tag
            >
            <van-tag type="danger" v-if="patient.isAccept == 2">已结束</van-tag>

            <van-tag plain type="primary" v-if="patient.type == 1"
              >图文问诊</van-tag
            >
            <van-tag plain type="primary" v-if="patient.type == 2"
              >电话问诊</van-tag
            >
            <van-tag plain type="primary" v-if="patient.type == 3"
              >上门问诊</van-tag
            >
            <p>{{patient.details}}</p>
          </div>
          <van-button
            round
            type="success"
            size="mini"
            class="accept"
            v-if="patient.isAccept == 0"
            @click="overAccept(index, 0)"
            >接诊</van-button
          >
          <van-button
            round
            type="primary"
            size="mini"
            class="accept"
            v-if="patient.isAccept == 1"
            @click="overAccept(index, 1)"
            >结束</van-button
          >
        </div>
      </div>
    </van-pull-refresh>
    <van-popup
      v-model:show="showPop"
      :round="true"
      :close-on-click-overlay="false"
    >
      <div class="context">
        <van-field
        v-model="state.liuyan"
          label-width="40px"
          rows="10"
          autosize
          label="留言"
          type="textarea"
          placeholder="请输入留言"
          border
        />
        <van-button round class="submit" type="primary" size="normal" @click="submit"
          >确定</van-button
        >
      </div>
    </van-popup>
    <van-tabbar route>
      <van-tabbar-item icon="wap-home-o" to="/index">主页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="/messages">患者</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home"> 我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";

export default defineComponent({
  name: "Index",

  created() {},

  setup() {
    //实例化路由
    const router = useRouter();

    //下拉刷新 状态
    const state = reactive({
      loading: false,
      isShow: false,
      liuyan:''
    });

    //显示弹出层
    const showPop = ref(false);

    //下拉刷新 回调
    const onRefresh = () => {
      setTimeout(() => {
        Toast("刷新成功");
        state.loading = false;
        state.isShow = true;
        state.count++;
      }, 1000);
    };

    ///===========================
    //患者列表
    const patients = reactive([
      {
        name: "刘海",
        sex: "男",
        age: "30",
        img:
          "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg",
        isAccept: 0, //是否
        type: "1", //图文问诊
        id: "1",
        details: "感冒了,不太舒服!",
      },
      {
        name: "小王",
        sex: "男",
        age: "10",
        img:
          "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg",
        isAccept: 1,
        type: "2", //电话问诊
        id: "2",
        details: "这两天头部神经一跳一跳地疼，让人心烦意乱。还失眠。晚上睡觉头也痛",
      },
      {
        name: "小刘",
        sex: "男",
        age: "20",
        img:
          "https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg",
        isAccept: 0,
        type: "3", //上门问诊
        id: "2",
        details: "感冒了,不太舒服!",
      },
    ]);

    const overAccept = (index, item) => {
      if (item === 0) {
        patients[index].isAccept = 1;
        Toast("接诊成功 已添加入患者列表");
      }
      if (item === 1) {
        patients[index].isAccept = 2;
        showPop.value = true;
        // Toast("结束 问诊");
      }
    };

    //留言
    const submit =()=>{
        showPop.value = false;
        Toast("结束 问诊");
    }

    return {
      state,
      onRefresh,
      patients,
      overAccept,
      showPop,
      submit
    };
  },
});
</script>

<style lang="less" scoped>
.home {
  background: #f6f7f9;
  text-align: left;
}
.local {
  margin-left: 5px;
}

.doct-lib {
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
  padding: 2px 10px;
}
.doct-lib header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.doct-lib header h4 {
  margin: 0;
  padding: 0;
}

.doct-lib header .more {
  display: flex;
  align-items: center;
  color: #000;
}

.card-title {
  font-weight: bold;
  font-size: 16px;
}

.card-desc {
  margin: 5px 0;
}

.card-tags {
  display: flex;
  align-items: center;
}
.my-list-item {
  padding: 10px 20px;
  display: flex;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 12px #ebedf0;
  margin-bottom: 10px;
  position: relative;
}
.my-list-item .van-image {
  flex: 1;
}
.my-list-item .info {
  flex: 5;
  margin-left: 10px;
}
.my-list-item .info .name {
  font-size: 18px;
  font-weight: bold;
}
.my-list-item .info .sex {
  margin: 0 10px;
}
.my-list-item .van-button {
  position: absolute;
  right: 20px;
}
.my-list-item .accept {
  position: absolute;
  bottom: 10px;
  right: 20px;
  padding: 15px;
}
.context {
  padding: 20px;
  width: 80vw;
  height: 50vh;
  textarea {
    border: 1px solid;
  }
  .submit {
    position: absolute;
    right: 10px;
    bottom: 20px;
  }
}
</style>
